<template>
    <el-card class="box-card">
        <el-row :gutter="20" class="ly-wrap">
            <el-col :span="6" class="ly-center">
                <el-card class="hr-left box-card">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="组织管理" name="company">
                            <div class="text item">
                                <el-input
                                    placeholder="输入关键字进行过滤"
                                    v-model="filterText">
                                </el-input>
                                <el-tree :data="treeList" node-key="id" default-expand-all empty-text="暂无数据"
                                         :filter-node-method="filterNode" ref="tree" @node-click="getCompanyId"
                                         :expand-on-click-node="false">
                                    <div class="custom-tree-node" slot-scope="{ node, data }">
                                        <div v-if="data.title">
                                            <Icon type="ios-people" style="font-size: 20px;" color="#7e066a"/>
                                            {{ node.label }}
                                            <el-dropdown>
                                                <span>
                                                    <Icon type="md-more" style="font-size: 20px;" color="#7e066a"/>
                                                </span>
                                                <el-dropdown-menu slot="dropdown" trigger="hover">
                                                    <el-dropdown-item
                                                        @click.native="addDivision(data.companyId)">添加子部门
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                        <div v-else>
                                            <Icon type="ios-people" style="font-size: 20px;" color="#7e066a"/>
                                            {{ node.label }}
                                            <el-dropdown>
                                                <span class="el-dropdown-link">
                                                    <Icon type="md-more" style="font-size: 20px;" color="#7e066a"/>
                                                </span>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item @click.native="modifyDivision(data)">修改名称
                                                    </el-dropdown-item>
                                                    <el-dropdown-item
                                                        @click.native="addDivision(data.companyId)">添加子部门
                                                    </el-dropdown-item>
                                                    <el-dropdown-item @click.native="delDivision(data.companyId)">删除
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                    </div>
                                </el-tree>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="角色管理" name="role">
                            <div class="text item">
                                <el-input
                                    placeholder="输入关键字进行过滤"
                                    v-model="filterText">
                                </el-input>
                                <el-tree :data="roleTreeList" node-key="id" default-expand-all empty-text="暂无数据"
                                         :filter-node-method="filterNode" ref="tree" @node-click="getUserRole"
                                         :expand-on-click-node="false">
                                    <div class="custom-tree-node" slot-scope="{ node, data }">
                                        <div v-if="data.title">
                                            <Icon type="ios-people" style="font-size: 20px;" color="#7e066a"/>
                                            {{ node.label }}
                                            <el-dropdown>
                                                <span>
                                                    <Icon type="md-more" style="font-size: 20px;" color="#7e066a"/>
                                                </span>
                                                <el-dropdown-menu slot="dropdown" trigger="hover">
                                                    <el-dropdown-item
                                                        @click.native="addRole(data.id,true)">添加角色
                                                    </el-dropdown-item>
                                                    <el-dropdown-item @click.native="modifyRole(data,false)">修改
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                        <div v-else>
                                            <Icon type="ios-people" style="font-size: 20px;" color="#7e066a"/>
                                            {{ node.label }}
                                            <el-dropdown>
                                                <span>
                                                    <Icon type="md-more" style="font-size: 20px;" color="#7e066a"/>
                                                </span>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item @click.native="modifyRole(data,true)">修改
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                    </div>
                                </el-tree>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card class="hr-right box-card">
                    <div slot="header" class="clearfix">
                        <span>人员管理</span>
                        <el-button style="float: right;" size="mini" type="primary" @click="addPeople('新增')">新增人员
                        </el-button>
                        <el-button v-if="roleManage" style="float: right;margin: 0px 10px 0px 0px" size="mini" type="primary"
                                   @click="addRole(null,false)">添加角色组
                        </el-button>
                        <el-button style="float: right;margin-right: 10px" size="mini" type="primary"
                                   :loading="dingTalkLoading"@click="updateDingTalk()">同步钉钉通讯录
                        </el-button>
                    </div>
                    <div>
                        <el-table stripe border v-loading="tableLoading" :data="tableData" size="large" ref="table">
                            <template slot="empty">暂无数据</template>
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="phone" label="登录账号/电话"></el-table-column>
                            <el-table-column prop="roleName" label="角色"></el-table-column>
                            <el-table-column prop="jobName" label="部门"></el-table-column>
                            <el-table-column label="操作" width="180" align="center">
                                <template slot-scope="scope">
                                    <el-dropdown>
                                        <el-button type="primary">
                                            操作<i class="el-icon-arrow-down el-icon--right"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown" align="center">
                                            <el-dropdown-item @click.native="handleAdjust(scope.row)">调整部门
                                            </el-dropdown-item>
                                            <el-dropdown-item @click.native="handleRole(scope.row)">调整角色
                                            </el-dropdown-item>
                                            <el-dropdown-item @click.native="addPeople('修改',scope.row)">修改
                                            </el-dropdown-item>
                                            <el-dropdown-item @click.native="handleDelete(scope.row)">删除
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </template>
                            </el-table-column>
                        </el-table>
                        <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize"
                              show-total
                              show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
                        </Page>
                    </div>

                </el-card>
            </el-col>
        </el-row>

        <!--新增部门 divisionVisible-->
        <el-dialog title="部门管理" :visible.sync="divisionVisible" width="30%">
            <div class="pp-info">
                <el-form :model="division" :rules="rules" ref="divisionForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="部门名称" prop="name">
                        <el-input v-model="division.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="divisionVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureAddDivision('divisionForm')">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :title="peopleTitle" :visible.sync="peopleVisible" width="30%">
            <div class="pp-info">
                <el-form :model="people" :rules="rules" ref="peopleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item v-if="peopleTitle=='修改'?false:true" label="部门" prop="companyId">
                        <treeselect :options="treeList" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                    noResultsText="没有发现结果" :default-expand-level="1" :value="value" placeholder="选择部门"
                                    style="width: 100%" :show-count="true" v-model="people.companyId"/>
                    </el-form-item>
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="people.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码" prop="phone">
                        <el-input v-model="people.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input type="password" v-model="people.password"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" prop="sex">
                        <el-radio v-model="people.sex" label="1">男</el-radio>
                        <el-radio v-model="people.sex" label="2">女</el-radio>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="peopleVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureAddPeople('peopleForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!--//调整部门-->
        <MemberSelector :data-tree="treeList" mode="MultiDept" :data-member="memberList"
                        ref="memberSelector" @affirmative="sureAdjust"></MemberSelector>
        <el-dialog title="调整部门" :visible.sync="adjustVisible" width="30%">
            <div class="pp-info">
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="adjustVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureAdjust('adjustForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!--//新增修改角色-->
        <el-dialog title="角色管理" :visible.sync="sureAddRoleVisible" width="30%">
            <div class="pp-info">
                <el-form :model="modelRole" :rules="rules" ref="roleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="modelRole.roleName"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="sureAddRoleVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureAddRole()">确 定</el-button>
            </div>
        </el-dialog>
        <!--//调整角色-->
        <el-dialog title="调整角色" :visible.sync="roleVisible" width="30%">
            <div class="pp-info">
                <el-form :model="memberRole" :rules="rules" ref="peopleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="角色" prop="companyId">
                        <treeselect :options="roleTreeList" noChildrenText="没有子节点" noOptionsText="暂无选项"
                                    multiple valueConsistsOf="LEAF_PRIORITY" noResultsText="没有发现结果"
                                    :default-expand-level="1" :value="value" placeholder="选择角色"
                                    style="width: 100%" :show-count="true" v-model="memberRole.roleId"/>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="roleVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureRole">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>


</template>
<script>
    import Treeselect from "@riophae/vue-treeselect";
    import MemberSelector from "../../components/member-selector/selector"

    export default {
        components: {
            Treeselect,
            MemberSelector
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        data() {
            return {
                activeName: "company",
                memberList: [],
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                filterText: '',
                treeList: [],
                roleTreeList: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                //    表单相关
                tableData: [],
                tableLoading: false,
                organizeVisible: false,
                //    组织
                organize: {},
                //加载员工条件
                filter: {
                    title: true,
                },
                //部门
                divisionVisible: false,
                division: {
                    name: '',
                    id: '',
                    pid: ''
                },
                // 人员
                peopleTitle: '',
                peopleVisible: false,
                people: {},
                value: null,
                //物业调整
                adjustVisible: false,
                adjust: {},
                checkList: [],
                //角色调整
                roleVisible: false,
                formLoading: false,
                roleManage: false,
                memberRole: {},
                //新增修改角色
                sureAddRoleVisible: false,
                modelRole: {},
                //新增子部门
                subDivisionVisible: false,
                subDivision: {},

                dingTalkLoading:false,

                //校验规则
                rules: {
                    companyId: [
                        {
                            required: true,
                            message: "请选择部门",
                        }
                    ],
                    pid: [
                        {
                            required: true,
                            message: "请选择上级部门",
                        }
                    ],
                    name: [
                        {
                            required: true,
                            message: "请填写",
                        }
                    ],
                    phone: [
                        {
                            required: true,
                            message: "请填写电话号码",
                        }
                    ],
                    password: [
                        {
                            required: true,
                            message: "请填写密码",
                        }
                    ],
                    sex: [
                        {
                            required: true,
                            message: "请选择性别",
                        }
                    ]
                },
            }

        },

        created: function () {
            this.treeData();
            this.roleTree();
        },
        methods: {

            //插件点击
            treeNodeClick: function (data) {
                console.log(data);
                this.getMemberList(data);
            },


            //节点筛选
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            //加载部门树
            treeData() {
                this.postRequest("/api/manageHR/getCompany").then(res => {
                    if (res.code == 20000) {
                        this.treeList = res.data;
                        this.getCompanyId(this.filter);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //加载角色
            roleTree() {
                this.postRequest("/api/manageHR/roleLoadData").then(res => {
                    if (res.code == 20000) {
                        console.log(res.data)
                        this.roleTreeList = res.data;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //选择部门查询人员
            getCompanyId(data) {
                this.tableLoading = true;
                this.filter = data;
                const params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    companyId: this.filter.companyId
                };
                //与后台交换数据
                this.postRequest("/api/manageHR/userLoadData", params).then(res => {
                    if (res.code == 20000) {
                        this.tableLoading = false;
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$message.error(res.message);
                    }
                });
            },

            //选择角色查询人员
            getUserRole(data) {
                this.tableLoading = true;
                this.filter = data;
                const params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                };
                if (data.title) {
                    params.groupId = data.id
                } else {
                    params.roleId = data.id
                }
                console.log(params)
                //与后台交换数据
                this.postRequest("/api/manageHR/userLoadData", params).then(res => {
                    if (res.code == 20000) {
                        this.tableLoading = false;
                        this.tableData = res.data.list;
                        this.pageTotal = res.data.total;
                    } else {
                        this.tableData = [];
                        this.$message.error(res.message);
                    }
                });
            },

            //插件加载数据

            getMemberList(data) {
                const params = {
                    pageNum: null,
                    companyId: data.companyId
                };
                //与后台交换数据
                this.postRequest("/api/manageHR/userLoadData", params).then(res => {
                    if (res.code == 20000) {
                        const _this = this;
                        const tmpList = [];
                        res.data.list.forEach(function (c) {
                            const list = c;
                            list.label = (c.name);
                            tmpList.push(list);
                        });
                        this.memberList = tmpList;
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },

            // 新增部门
            addDivision: function (companyId) {
                this.division = {};
                this.division.pid = companyId;
                this.divisionVisible = true;
            },

            // 确认新增部门
            sureAddDivision: function (divisionForm) {
                this.$refs[divisionForm].validate((valid) => {
                    if (valid) {
                        this.postRequest("/api/manageHR/saveOrUpdateCompany", this.division).then(res => {
                            console.log(res)
                            if (res.code == 20000) {
                                this.divisionVisible = false;
                                this.treeData();
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                });
            },
            //修改部门名称
            modifyDivision: function (data) {
                console.log(data);
                this.division = {};
                this.divisionVisible = true;
                this.division.id = data.companyId;
                this.division.name = data.label
            },

            //删除部门
            delDivision: function (id) {
                this.division.id = id;
                this.$confirm('此操作将部门所关联的权限一并删除，此操作不可逆, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.postRequest("/api/manageHR/deleteCompany", this.division).then(res => {
                        if (res.code == 20000) {
                            this.treeData();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                })
            },


            //添加部门快速入口
            /*addSubDivision: function () {
                this.subDivisionVisible = true;
            },*/
            //确认添加
            suerAddSubDivision: function (subDivisionForm) {
                this.$refs[subDivisionForm].validate((valid) => {
                    if (valid) {
                        this.postRequest("/api/manageHR/saveOrUpdateCompany", this.subDivision).then(res => {
                            console.log(res)
                            if (res.code == 20000) {
                                this.subDivisionVisible = false;
                                this.treeData();
                                this.$Message.success({
                                    content: "操作成功",
                                    duration: 5
                                });
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                });
            },

            // 新增人员
            addPeople: function (str, row) {
                this.people = {};
                this.peopleTitle = str
                this.peopleVisible = true;
                if (str == "修改") {
                    this.people.id = row.id;
                    this.people.name = row.name;
                    this.people.phone = row.phone;
                    this.people.password = row.password;
                    this.people.companyId = row.companyId
                }
            },

            // 新增人员 确认
            sureAddPeople(peopleForm) {
                this.$refs[peopleForm].validate((valid) => {
                    if (valid) {
                        // /api/manageHR/saveOrUpdateUser
                        this.postRequest("/api/manageHR/saveOrUpdateUser", this.people).then(res => {
                            console.log(res)
                            if (res.code == 20000) {
                                this.peopleVisible = false;
                                this.$Message.success({
                                    content: "新增成功",
                                    duration: 5
                                });
                                this.getCompanyId(this.filter);
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    }
                });
            },

            //删除人员
            handleDelete(row) {
                this.$Modal.confirm({
                    title: "提示",
                    content: "确定删除该人员？",
                    onOk: () => {
                        this.getRequest("/api/manageHR/deleteUser?id=" + row.id).then(res => {
                            if (res.code == 20000) {
                                this.$Message.success("删除成功!");
                                this.pageNum = 1;
                                this.getCompanyId(this.filter);
                            } else {
                                this.$message.error(res.message);
                            }
                        });
                    },
                });
            },

            //调整部门
            handleAdjust: function (row) {
                this.adjust = {};
                this.adjust.userId = row.id;
                this.$refs.memberSelector.showDialog()
            },
            //确认调整部门
            sureAdjust: function (data) {
                console.log(data);
                const companyId = [];
                let params = {
                    userId: this.adjust.userId,
                    companyId: companyId
                }
                data.forEach(function (c) {
                    companyId.push(c.id);
                });
                this.postRequest("/api/manageHR/assignCompany", params).then(res => {
                    if (res.code == 20000) {
                        this.$Message.success("操作成功!");
                        this.getCompanyId(this.filter);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //新增角色
            addRole(groupId, isleaf) {
                this.modelRole = {};
                this.sureAddRoleVisible = true;
                this.modelRole.groupId = groupId
                this.modelRole.isleaf = isleaf
            },
            //修改角色
            modifyRole: function (data, isleaf) {
                this.modelRole = {};
                this.sureAddRoleVisible = true;
                this.modelRole.id = data.id;
                this.modelRole.roleName = data.label
                this.modelRole.isleaf = isleaf;
            },
            //确定新增修改角色
            sureAddRole: function () {
                console.log(this.modelRole);
                this.postRequest("/api/manageHR/saveOrUpdateRole", this.modelRole).then(res => {
                    if (res.code == 20000) {
                        this.sureAddRoleVisible = false;
                        this.$Message.success("操作成功!");
                        this.roleTree();
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            //调整角色
            handleRole: function (row) {
                this.memberRole = {};
                this.memberRole.userId = row.id;
                this.roleVisible = true;
            },
            //确定调整角色
            sureRole() {
                const roleId = [];
                let params = {
                    userId: this.memberRole.userId,
                    roleId: roleId
                };
                this.memberRole.roleId.forEach(function (c) {
                    roleId.push(c);
                });
                this.postRequest("/api/manageHR/assignRole", params).then(res => {
                    if (res.code == 20000) {
                        this.roleVisible = false;
                        this.$Message.success("操作成功!");
                        this.getCompanyId(this.filter);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },

            //同步钉钉通讯录
            updateDingTalk(){
                this.dingTalkLoading = true;
                this.getRequest("/api/dingTalk/syncDingTalk").then(res => {
                    this.dingTalkLoading = false;
                    if (res.code == 20000) {
                        this.$notify({
                            message: '同步钉钉通讯录成功',
                            type: 'success',
                            duration: 0
                        });
                        this.getCompanyId(this.filter);
                    }else{
                        this.$notify({
                            message: res.message,
                            type: 'success',
                            duration: 0
                        });
                    }
                });
            },

            checkDivision: function (value, data) {
                console.log(value);
                this.checkList.push({name: value.label, id: value.companyId})
            },
            //选择标签页
            handleClick(tab) {
                this.activeName = tab.name;
                if (tab.name == "role") {
                    this.roleManage = true;
                }
                if (tab.name == "company") {
                    this.roleManage = false;
                }
            },

            //表格相关
            handlePage(value) {
                this.pageNum = value;
                this.getCompanyId(this.filter);
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.getCompanyId(this.filter);
            },
        }

    }
    ;
</script>

<style lang="scss">
    .hr-left {
        .el-tree-node__content {
            height: 40px;
            font-size: 15px;
        }
        .el-card__body {
            height: 795px;
            padding: 15px;
            overflow: auto;
        }
        .el-tree-node__expand-icon {
            color: #7e066a;
        }
        .el-tree-node__expand-icon.is-leaf {
            color: transparent;
        }
        .el-tabs__content {
            overflow: auto;
        }
        .el-tree-node > .el-tree-node__children {
            overflow: auto;
            background-color: transparent;
        }
    }

    .hr-right {
        .el-card__body {
            height: 740px;
            overflow: auto;
        }
    }

    .text {
        display: inline-block;
        overflow: inherit;
    }

</style>

<style scoped lang="scss">
    .ly-wrap {
        width: 100%;
        height: 800px;

    }


</style>
